<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>批量导入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">

</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-form :inline="true">
            <el-form-item>
                <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                    @click="window.history.back()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-upload class="upload-demo" accept=".xlsx" ref="upload" action="" :show-file-list="false" :on-change="handleChange"
                    :auto-upload="false">
                    <el-button :disabled="loading" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button :loading="loading" style="margin-left: 10px;" size="small" type="success"
                        @click="submitUpload(0)">上传文件</el-button>
                    <el-button  :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                        @click="handleClean">清空数据</el-button>
                    <el-badge :value="success" style="margin-left: 10px;" class="item" type="success">
                        <el-button size="small">成功</el-button>
                    </el-badge>
                    <el-badge style="margin-left: 10px;" :value="error" class="item">
                        <el-button size="small">失败</el-button>
                    </el-badge>
                </el-upload>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border
            style="width: 100%" height="calc(100vh - 180px)">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column label="供应商名称" align="center" prop="Supplier_Name">
                <template v-slot="{row}">
                    <el-input v-if="row.isEdit"  v-model="row['Supplier_Name']"></el-input>
                    <span v-else>{{row['Supplier_Name']}}</span>
                </template>
            </el-table-column>
            <el-table-column label="纳税识别号" align="center" prop="Tax_Number">
                <template v-slot="{row}">
                    <el-input v-if="row.isEdit"  v-model="row['Tax_Number']"></el-input>
                    <span v-else>{{row['Tax_Number']}}</span>
                </template>
            </el-table-column>
            <el-table-column label="供应商地址省" show-overflow-tooltip align="center" prop="Supplier_Address">
                <template v-slot="{row}">
                    <span  v-if="row.isEdit" >
                        <el-cascader v-model="row.Address" filterable :props="{value:'label'}" :options="city" style="width: 100%"></el-cascader>
                        <el-input v-model="row['Address_Detail']"></el-input>
                    </span>
                    <span v-else>{{row['Supplier_Address']}}</span>
                </template>
            </el-table-column>
            <el-table-column label="银行账户" align="center" prop="Account_Number">
                <template v-slot="{row}">
                    <span v-if="row.isEdit" >
                        <el-input v-model.trim="row['Account_Number']"></el-input>
                        <el-input v-model.trim="row['Bank_Name']"></el-input>
                    </span>
                    <span v-else>
                        <p v-for="(item,index) in row['Account_Number'].split(';')" :key="index">{{item}}({{row['Bank_Name'].split(';')[index]?row['Bank_Name'].split(';')[index]:'无开户行'}})</p>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template v-slot="{row}">
                    <el-tag :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':''">{{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':'待导入'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="原因说明" align="center">
                <template v-slot="{row}">
                    {{row.Cause}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template v-slot="{row,$index}">
                    <el-button size="small" :disabled="loading"  :type="row.isEdit?'success':'primary'" @click="handleEdit(row)">
                        {{row.isEdit?'保存':'修改'}}
                    </el-button>
                    <el-button size="small" :disabled="loading" type="danger" @click="handleRemove($index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="form.page" :page-sizes="[15, 30 , 60 ,100, 200, 300, 400]" :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/import_supplier.js"></script>
</body>

</html>